import './Comment.scss'

import React from 'react'
import {connect} from 'react-redux'
import {getCommentData} from "../actions/commentAction";
import CommentList from './CommentList/CommentLIst.jsx'
class Comment extends React.Component {
  constructor(props) {
    super(props)
    this.props.dispatch(getCommentData())
  }
  //渲染5颗星方法
  renderScore(data) {
    if (typeof data === 'number') {
  
  
      let score = data.toString()
      let scoreArray = score.split('.')
      //满星个数
      let fullstar = parseInt(scoreArray[0])
      //半颗星
      let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0
      let nullstar = 5 - fullstar - halfstar
      let starArray = []
      for (let i = 0; i < fullstar; i++) {
        starArray.push(<div key={i + 'full'} className='star fullstar'></div>)
      }
      if (halfstar) {
        for (let j = 0; j < halfstar; j++) {
          starArray.push(<div key={j + 'half'} className='star halfstar'></div>)
        }
      }
      if (nullstar) {
        for (let k = 0; k < nullstar; k++) {
          starArray.push(<div key={k + 'null'} className='star nullstar'></div>)
        }
      }
      return starArray
    }
  }
  render(){
    let data = this.props.commentData
    return (
      <div className='comment-inner'>
        <div className='comment-score'>
          <div className='mail-score-content'>
            <div className='mail-score'>{data.comment_score}</div>
            <div className='mail-text'>商家评价</div>
          </div>
          <div className='other-score-content'>
            <div className='taste-score'>
              <div className='taste-text'>口味</div>
              <div className='taste-star-wrap'>{this.renderScore(data.food_score)}</div>
              <div className='taste-score-text'>{data.food_score}</div>
            </div>
            <div className='package-score'>
              <div className='package-text'>包装</div>
              <div className='package-star-wrap'>{this.renderScore(data.pack_score)}</div>
              <div className='package-score-text'>{data.pack_score}</div>
            </div>
          </div>
          <div className='send-score-content'>
            <div className='send-score'>{data.quality_score}</div>
            <div className='send-text'>商家评价</div>
          </div>
        </div>
        <CommentList/>
      </div>
    )
  }
}

export default connect(
  state=>({
    commentData: state.commentReducer.commentData
  })
)(Comment)